<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>登录</title>

    <div th:replace="includes/common :: header-css"/>

    <style>
        body{overflow:hidden;}
        .video-player{background-color: transparent;display: block;position: absolute;z-index: 1;top:0;}
        .video_mask{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:90; background-color:rgba(0,0,0,0.5); }
        .login{ height:260px;width:260px;padding: 20px;background-color:rgba(0,0,0,0.5);border-radius: 4px;position:absolute;left: 50%;top: 50%; margin:-150px 0 0 -150px;z-index:99;}
        .login h1{ text-align:center; color:#fff; font-size:24px; margin-bottom:20px; }
        .form_code{ position:relative; }
        .form_code .code{ position:absolute; right:0; top:1px; cursor:pointer; }
        .login_btn{ width:100%; }
    </style>
</head>
<body>
<video class="video-player" preload="auto" autoplay="autoplay" loop="loop" data-height="1080" data-width="1920" height="1080" width="1920">
    <source src="/res/images/video/login.mp4" type="video/mp4"/>
</video>
<div class="video_mask"></div>
<div class="login">
    <h1>Minions</h1>
    <form class="layui-form">
        <div class="layui-form-item">
            <input class="layui-input" name="username" placeholder="用户名" lay-verify="required" type="text" autocomplete="off" value="smalle"/>
        </div>
        <div class="layui-form-item">
            <input class="layui-input" name="password" placeholder="密码" lay-verify="required" type="password" autocomplete="off" value="smalle"/>
        </div>
        <div class="layui-form-item form_code">
            <input class="layui-input" name="code" placeholder="验证码" lay-verify="required" type="text" autocomplete="off" value="123"/>
            <div class="code"><img src="/res/images/code.jpg" width="116" height="36"/></div>
        </div>
        <button class="layui-btn login_btn" lay-submit="" lay-filter="login">登录</button>
    </form>
</div>

<div th:replace="includes/common :: js"></div>

<script type="text/javascript" src="/res/js/login.js"></script>

</body>
</html>